<template>
  <v-app id="app">
    <!-- 导航栏 -->
      <TopNavBar @over="openNavigation"></TopNavBar>
    <v-content>
        <router-view :key="$route.fullPath" />
     </v-content>
    <!-- 底部 -->
    <Footer></Footer>
    <v-overlay :value="overlay"
    color=white
    opacity=0.9
    :absolute="absolute"
    >        
    <div class="channelOver" @click="closeOVer() ">×</div>
      <div class="nage tag-cloud ">
            <div class="nageItem" 
            v-for="(item) of nageList"
            :key="item"
            @click="closeOVer()"
            >
            <v-col md="2" cols="12">     
            <router-link :to="item.routerUrl">
            {{item.name}}
            </router-link>
            </v-col>
            </div>

     </div>

    </v-overlay>
  </v-app>
</template>

<script>
import TopNavBar from "./components/layout/TopNavBar";
import SideNavBar from "./components/layout/SideNavBar";  
import Footer from "./components/layout/Footer";

export default {
  name: 'App',
    components: {
    TopNavBar,
    SideNavBar,
    Footer
  },

    data: function() {
    return {
      overlay: false,
      nageList:[
        {
          name:"首页",
          routerUrl:"/home"
        },
        {
          name:"摄影",
          routerUrl:"/album"
        },
        {
          name:"归档",
          routerUrl:"/archive"
        },
        {
          name:"标签",
          routerUrl:"/tag"
        },
        {
          name:"分类",
          routerUrl:"/category"
        },
        {
          name:"项目",
          routerUrl:"/projectList"
        },
        {
          name:"关于",
          routerUrl:"/about"
        },
      ]
    };
  },
  methods:{
    openNavigation(data){
      this.overlay = data
},
closeOVer(){
  this.overlay = false
}
  }
}

</script>

<style>
.channelOver{
  text-align: center;
  height: 30px;
  border: 1px;
  color: rgb(76,73,72);
  position:fixed;
  top: 10px;
  right: 10px;
  font-size: 45px;
}
.nageItem{
  width: auto;
  margin-left: 30px;
  color: #000;
  font-size: 30px;
}
.nage{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (min-width: 759px) {
.nageItem{
  margin-left: 30px;
  color: rgb(240, 54, 54);
  font-size: 30px;
}
.nage{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tag-cloud a:hover {
  color: rgb(240, 54, 54) !important;
  transform: scale(1.1);
}
}
</style>
